<template>
  <a-modal
    :title="formTile + '著作权'"
    :visible="true"
    width="40%"
    :footer="null"
    @cancel="reset"
  >
    <a-card>
      <a-row
        type="flex"
        justify="start"
        align="top"
      >
        <a-col :span="24">
          <a-form
            :form="form"
            @submit="handleSubmit"
            :labelCol="formItemLayout.labelCol"
            :wrapperCol="formItemLayout.wrapperCol"
          >
            <a-form-item
              label="著作权名称"
              :required="true"
            >
              <a-input
                placeholder="请输入著作权名称"
                :maxLength="40"
                allow-clear
                v-decorator="[
                  `name`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入著作权名称'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
            <a-form-item
              label="著作权编号"
              :required="true"
            >
              <a-input
                placeholder="请输入著作权编号"
                :maxLength="40"
                allow-clear
                v-decorator="[
                  `code`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入著作权编号'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
            <a-form-item
              label="有效时间"
              :required="true"
            >

              <a-range-picker
                @change="selectTime"
                v-decorator="[
                  `time`,
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择有效时间'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>

            <a-form-item
              label="证书及样本"
              :required="true"
            >
              <a-upload
                name="file"
                list-type="picture-card"
                :multiple="true"
                class="avatar-uploader"
                :data="{ type: 3 }"
                :action="uploadUrl"
                :fileList="fileList"
                :before-upload="beforeUpload"
                @change="handleChange"
                v-decorator="[
                  'certificateUrl',
                  {
                    rules: [{ required: true, message: '请上传证书及样本' }],
                  },
                ]"
              >
                <div v-if="fileList.length <= 5">
                  <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">上传图片</div>
                </div>
              </a-upload>
            </a-form-item>
            <a-row>
              <a-col
                :span="16"
                :offset="8"
                class="info-action"
              >
                <a-button
                  type="primary"
                  @click="reset"
                >返回</a-button>
                <a-button
                  type="primary"
                  class="ml-20"
                  html-type="submit"
                  :loading="loading"
                >保存</a-button>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
  </a-modal>
</template>

<script>
import { currencyCreate, currencyUpdate, patentDetail, uploadUrl } from '@api/pattern/index.js'
import moment from 'moment'
import 'moment/locale/zh-cn'

export default {
  props: {
    patternId: {
      type: [Number, String],
      default: ''
    },
    patentId: {
      type: [Number, String],
      default: ''
    }
  },

  data() {
    return {
      current: 1,
      fileList: [],
      uploadUrl,
      size: 1000,
      total: 0,
      time: [],
      uploading: false,
      uploadLoading: false,
      loading: false,
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 15 },
          xs: { span: 12 },
          sm: { span: 12 }
        }
      },
      record: null,
      formTile: '新增'
    }
  },

  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    },
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'category' })
  },

  created() {
    const { patentId } = this.$props
    if (patentId == 0) {
      this.formTile = '新增'
    } else {
      this.formTile = '编辑'
      this.getDetail(patentId)
    }
  },

  methods: {
    async getDetail(id) {
      const res = await patentDetail('patent', { patentId: id })
      if (res.code == 200) {
        const time = []
        time.push(res.data.takeEffectDate)
        time.push(res.data.invalidDate)
        this.form.setFieldsValue({
          code: res.data.code,
          time: time,
          name:res.data.name,
          certificateUrl: res.data.certificateUrl
        })
        res.data.certificateUrlList.map(item => {
          const obj = {
            name: 'patent.jpg',
            uid: item,
            status: 'done',
            url: item
          }
          this.fileList.push(obj)
        })
        this.form.setFieldsValue({
            certificateUrl: res.data.certificateUrlList.map(item => {
              return {
                name: 'patent.jpg',
                url: item
              }
            })
          })
      }
    },
    selectTime(date, dateString) {
      this.time = dateString
      console.log(date, dateString)
    },

    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    handleChange(info) {
      let fileList = [...info.fileList]
      this.fileList = fileList
      if (info.file.status === 'uploading') {
        this.uploading = true
        return
      }
      if (info.file.status === 'done') {
        this.uploading = false
        let list = fileList.map(file => {
          if (file.response) {
            file.url = file.response.data.url
          }
          return file
        })
        this.fileList = list
      }
      if (info.file.status === 'error') {
        this.$message.error('图片上传失败')
      }
    },

    beforeUpload: function (file) {
      var fileType = file.type
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片')
        return false
      }
    },
    async submit(values) {
      let certificateUrlList = []
      this.fileList.map(item => {
        certificateUrlList.push(item.url)
      })
      this.loading = true
      const { patentId, patternId } = this
      const { workNo, realname } = this.userInfo
      if (patentId) {
        values.patentId = patentId
      }
      values.takeEffectDate = this.time[0]
      values.invalidDate = this.time[1]
      values.jobNumber = workNo
      values.patternId = patternId
      values.certificateUrlList = certificateUrlList
      values.certificateUrl = ''
      const FNCName = patentId != 0 ? currencyUpdate : currencyCreate
      try {
        const res = await FNCName('patent', values)
        if (res.code == 200) {
          let text = this.patentId != 0 ? '编辑成功' : '新增成功'
          this.$message.success(text)
          let operate = this.patentId != 0 ? 1 : 0
          this.reset(values, operate)
        } else {
          this.$message.error(res.msg || res.message)
        }
      } catch (error) {
        this.$message.error('失败')
      } finally {
        this.loading = false
      }
    },
    reset(values, operate) {
      this.form.resetFields()
      this.$emit('close', values, operate)
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
.poster {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  position: relative;
  &:hover {
    .img-modal {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .img {
    width: 100%;
    height: 100%;
  }
  .img-modal {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    position: absolute;
    color: #fff;
    font-size: 20px;
    width: 100%;
    top: 0;
    height: 100%;
    left: 0;
  }
}
.fileList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.tips {
  margin-left: 5px;
  cursor: pointer;
}
</style>
